<template>
  <div class="photosnew">
    <h3>{{ newobj.title }}</h3>
    <p class="arond">
      <span>发表时间: {{ newobj.add_time | deteFoemat }}</span>
      <span>点击 {{ newobj.click }} 次</span>
    </p>
    <hr />
    <div v-html="newobj.content"></div>
    <hr />
    <!-- 缩放图区域 -->
    <div class="photos">
      <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>

    <!-- 放置公共的子组件 -->
    <comenphotos :id="id"></comenphotos>
  </div>
</template>
<script>
//引入子组件
import comenphotos from "../subcoment/comment.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      newobj: {},
      slide1: []
    };
  },
  created() {
    this.getPhotocom();
    this.getPhotos();
  },
  methods: {
    getPhotocom() {
      this.axios.get("api/getimageInfo/" + this.id).then(res => {
        console.log(res.data.message[0]);
        this.newobj = res.data.message[0];
      });
    },
    getPhotos() {
      this.axios.get("api/getthumimages/" + this.id).then(res => {
        res.data.message.forEach(item => {
          item.w = 600; //设置以大图浏览时的宽度
          item.h = 400; //设置以大图浏览时的高度
          item.msrc = item.src;
        });
        console.log(res.data.message);
        this.slide1 = res.data.message;
      });
    },
    handleClose() {
      console.log("close event");
    }
  },
  components: {
    comenphotos
  }
};
</script>
<style lang="less">
.photosnew {
  h3 {
    font-size: 17px;
    text-align: center;
    color: pink;
    padding: 10px;
  }
  .arond {
    display: flex;
    justify-content: space-between;
  }
  .photos {
    width: 100%;
    .my-gallery {
      width: 100%;
      figure {
        display: inline-block;
        width: 30%;
        margin: 0;
        padding: 0;
        margin: 5px;
        a {
          display: inline-block;
          width: 100%;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>